<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/serializeObject.js"></script>
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js"></script>-->
</head>
<body>
<h1>用户注册</h1>

<form id="userForm" action="add" method="post">

    <table>
        <tr>
            <td>用户名：</td>
            <td><input name="username" type="text" value=""></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input name="password" type="password" value=""></td>
        </tr>
        <tr>
            <td>
                <!--submit立即提交表单-->
                <input type="submit" value="submit注册">
                <!--button 暂时不提交，需要有对应的事件才可以触发-->
                <input type="button" value="button注册" onclick="zhuce()">
            </td>
        </tr>

    </table>
</form>


<script type="text/javascript">


    /*
    * $('userForm') id选择器的方式
    * JSON.stringify($('userForm').serializeObject()) 将表单数据序列化
    * */
    function zhuce() {
        $.ajax({
            url: "http://localhost:8080/add", //建议写全路径，不要填写相对路径
            type: "POST",
            data: JSON.stringify($('#userForm').serializeObject()),
            contentType: "application/json",
            success: function (data) {
                if(data.code=="200"){
                    //alert(data.message)
                   // window.location.href="hello.html";
                    console.log(data.message);
                }
            },
            error: function () {
                alert("失败....")
            }
        });
    }

</script>

</body>
</html>